<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>校易淘 - 我的订单</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/main.js" defer></script>
</head>
<body>

  <!-- 头部 -->
  <header>
    <h1>校易淘二手交易平台</h1>
    <nav>
      <a href="index.html">首页</a>
      <a href="cart.html">购物车</a>
      <a href="publish.html">发布商品</a>
      <a href="myitems.html">我的商品</a>
      <a href="orders.html">我的订单</a>
      <a href="login.html">登录</a>
      <a href="register.html">注册</a>
    </nav>
  </header>

  <div class="container">
    <h2 style="text-align:center; margin-bottom:20px;">我的订单</h2>

    <table id="orders-table">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>总价</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <!-- 订单列表由 main.js 渲染 -->
      </tbody>
    </table>
  </div>

  <script>
    // 初始化订单列表
    let orders = JSON.parse(localStorage.getItem("orders")) || [];

    // 模拟生成订单（从购物车结算）
    function createOrder() {
      let cart = JSON.parse(localStorage.getItem("cart")) || [];
      if (cart.length === 0) {
        alert("购物车为空，无法生成订单！");
        return;
      }

      cart.forEach(item => {
        orders.push({
          id: Date.now() + Math.random(),
          title: item.title,
          price: item.price,
          quantity: item.quantity,
          total: item.price * item.quantity,
          status: "待发货"
        });
      });

      localStorage.setItem("orders", JSON.stringify(orders));
      localStorage.removeItem("cart"); // 清空购物车
      renderOrders();
      alert("订单已生成！");
    }

    // 渲染订单
    function renderOrders() {
      const ordersTable = document.querySelector("#orders-table tbody");
      ordersTable.innerHTML = "";

      orders.forEach(order => {
        const tr = document.createElement("tr");
        tr.innerHTML = `
          <td>${order.title}</td>
          <td>${order.price} 元</td>
          <td>${order.quantity}</td>
          <td>${order.total} 元</td>
          <td>${order.status}</td>
        `;
        ordersTable.appendChild(tr);
      });
    }

    document.addEventListener("DOMContentLoaded", renderOrders);
  </script>

  <!-- 模拟结算按钮 -->
  <div style="text-align:center; margin:20px;">
    <button onclick="createOrder()">模拟结算购物车商品生成订单</button>
  </div>

</body>
</html>
